<template>
  <section id="msginfo" v-loading="loading"> 
    <div style=" background-color: white;">
       <div class="msginput">
          <el-input v-model="msg" type="textarea" placeholder="请输入对我们服务的意见或建议（50-200）字" :rows="6"></el-input>
       </div>
       <div class="upfile">
          <el-row >
              <el-col :span='8' v-for='(val,index) in imgUrl' :key='index'>
                <img :src="val" height="80" width="80px" alt="tu">
              </el-col>
              <el-col :span='8' >
                 <div class='file-wrap'>
                   <input type="file" ref='file' @change='fileChange' accept="image/*">
                   <div>
                     <span class='el-icon-plus'></span>
                   </div>
                 </div>
              </el-col>
            </el-row>
           <div style="margin-top:10px;color:#999;">
                <small>图片最多上传3张，且必须是png/jpg</small>
           </div>
        </div>  
        <div style="padding: 0 10px 0px 10px;">
            <el-button @click="submit" type="primary" style="width:100%;">提交</el-button>
        </div>
       <br> 
    </div>
  </section>
</template>
<script>
import {AJAX,URL_LEAVING_MESSAGE,URL_UPIMG,_layer} from './comm.js';
export default {
  data: function() {
    return ({ 
      msg: "", 
      imgSubmitUrl:[],
      imgLen:0,
      imgOff:false,
      imgUrl:[],
      imgNo:true,
      loading:false
    })
  },
  beforeCreate: function() {
    $("title").text("留言反馈");
  },
  mounted: function() {
    setTimeout(function() {
      var h = $(window).height();
      $("#msginfo").css("min-height",h+"px");
      // $('#aa').click(function(event){
      //   event.stopPropagation();
      //   event.preventDefault();

      // });
    }, 300);
  },
  methods: { 
    //提交留言和图片地址
    submit(){
      let This=this;
      if(!this.imgLen&&!this.msg.trim()){
        _layer('别想什么都不提交');
        return;
      }
      This.loading=true;
      var time=setInterval(function(){
        if(This.imgOff||This.imgNo){
          let send={
            content:This.msg,
            messageImagesJson:This.imgSubmitUrl
          };
          AJAX({
            method:'post',
            data:send,
            url:URL_LEAVING_MESSAGE
          },function(data){
            console.log('提交留言');
            console.log(data);
            if(data.data.retult){
              _layer('感谢你的反馈,我们会尽快处理');
              setTimeout(function(){
                history.back();
              },2000);
              
            }else{
              _layer('提交反馈失败');
            }
            This.loading=false;
          });
          clearInterval(time);
        }
      },1);
    },
    //处理图片
    fileChange(){
      let This=this;
      // This.imgSubmitUrl=[];
      // This.imgUrl=[];
      this.imgNo=false;
      this.imgOff=false;
      let file=this.$refs.file.files;
      let imgLen=file.length;
      this.imgLen=imgLen;
      let form=new FormData();
      for(let i=0;i<imgLen;i++){
        form.append('file',file[i]);
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onload = function(){
          This.imgUrl.push(this.result);
        }
      }
      AJAX({
        method:'post',
        url:URL_UPIMG,
        data:form
      },function(data){
        This.imgSubmitUrl.push(...data.data.data);
        This.imgOff=true;
      });
    }
  },
}
</script>
<style> 
#msginfo >div .msginput {
  padding: 10px;
}
#msginfo  .upfile {
  padding: 10px;
}
#msginfo >div  .upfile li {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  position: relative;
  margin-bottom: 5px;
  font-size: 28px;
}
#msginfo >div  .upfile li .delimg {
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  position: absolute;
  top: -5px;
  left: -5px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  border-radius: 10px;
}
#msginfo >div  .upfile li .upimgfs {
  background-color: black;
  height: 20px;
  line-height: 20px;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 14px;
  position: absolute;
  left: 0px;
  top: 30px;
}
#msginfo >div  .upfile .upimgbtn {
  border: 1px solid #ccc;
  text-align: center;
  line-height: 80px;
}
#msginfo >div  .upfile .upimgbtn input {
  width: 100%;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
}
#msginfo >div  .upfile .upimgbtn i {
  color: #ccc;
}
#msginfo >div  .upfile li img {
  width: 100%;
  height: 80px;
}
.file-wrap{
  position:relative;
  height:80px;
}
.file-wrap input{
  position:absolute;
  z-index:2;
  height:85px;
  width:85px;
  opacity:0;
}
.file-wrap div{
  position:absolute;
  width:78px;
  height:78px;
  border:1px dashed red;
  font-size:20px;
  text-align:center;
  line-height:78px;
}
</style>
